<template>
  <div class="login-wrap" v-show="showLogin">
   <div>
     <h2 class="login-title">学远培训登录</h2>
     <p v-show="showTishi">{{tishi}}</p>
     <input type="text" placeholder="请输入用户名" v-model="username">
     <input type="password" placeholder="请输入密码" v-model="password">
     <button @click="login">登录</button>
     <span>没有账号？马上注册</span>
   </div>
  </div>
</template>

<script>
    import axios from 'axios'

    export default {
        name: "login",
        data() {
            return {
                showLogin: true,
                showRegister: false,
                showTishi: false,
                tishi: '',
                username: '',
                password: '',
                newUsername: '',
                newPassword: ''
            }
        },
        methods: {
            login() {
                axios.post('http://www.xueyuanjiaoyu.com/api/login/login',{
                    username: this.username,
                    password: this.password
                }).then((res) => {
                    res = res.data
                    if (res.code > 0) {
                        this.$router.replace('/')
                        // 存储用户登录成功信息
                        // ...
                    } else {
                        this.showTishi = true
                        this.tishi = res.msg
                    }
                })
                .catch((err) => {
                    // 模拟调整
                    this.$router.replace('/')
                    console.log(err);
                });
            },
            login1() {
                let data = {username: this.username, pwd: this.password}
                this.$http.post('http://localhost/xunfei/xf_service/login.php', data)
                    .then(res => {
                        res = res.body
                        if (res.code > 0) {
                            this.$router.push('/')
                        } else {
                            this.showTishi = true
                            this.tishi = res.message
                        }
                    }, res => {
                        console.log(res)
                    });
            }
        }
    }
</script>

<style lang="stylus" scoped>
    .login-wrap {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
        text-align: center;
      background-image: url(../../assets/login_bg.jpg);
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;

    }
    .login-title{
      color: #fff;
      padding: 15px 0px;
    }

    input {
        display: block;
        width: 250px;
        height: 40px;
        line-height: 40px;
        margin-bottom: 26px;
        outline: none;
        border: 1px solid #888;
        padding: 10px;
        box-sizing: border-box;
    }

    p {
        color: red;
    }

    button {
        display: block;
        width: 250px;
        height: 40px;
        line-height: 40px;
        margin: 0 auto;
        border: none;
        background-color: #41b883;
        color: #fff;
        font-size: 16px;
        margin-bottom: 5px;
        cursor: pointer;
    }

    span {
      display: block;
      cursor: pointer;
      color: #00F7DE;
      padding-top: 5px;
      text-align: right;
    }

    span:hover {
        color: #41b883;
    }
</style>
